<template>
  <div style="margin:0 15px;">
    <van-nav-bar title="首页"/>
    <div><img src="../assets/main1.png" alt=""></div>
    <div class="box-card">
      <div class="b-c-t">
        <button style="width:370px;height:150px;border:none ;background-color: aqua;" @click="zhuanqu">
        <div class="box-card-top">
          <div style="font-size: 20px;color: #666;">
            防疫专区
          </div>    
          <div style="font-size: 16px;color: #999;margin-top: 5px;">
            这里是智慧防疫
          </div>
        </div>
        </button>
        
        <button style="width:370px;height:160px;border:none ;" @click="hesuan">
        <div class="b-l-b" style="position: relative;">
          <div>
            <div style="font-size: 20px;color: #666;">
              核酸检测
            </div>
            <div style="font-size: 16px;color: #999;margin-top: 5px;">
              这里是智慧公益
            </div>
          </div>
          <div style="position: absolute;right: 4px;"><a href=""><img style="width: 48px;height: 48px;"
                src="../assets/kf.png" alt=""></a></div>
        </div>
        </button>
      </div>
      <div style="margin-left: 10px;width: 50%;margin-top: -10px;">
      <button style="width:370px;height:100px;border:none ;" @click="yungo">
        <div class="box1" style="background: #eff8f7;">
          <div>
            <div style="font-size: 20px;color: #666;">
              云购物
            </div>
            <div style="font-size: 16px;color: #999;margin-top: 5px;">
              这里是购物中心
            </div>
          </div>
          <div style="position: absolute;right: 4px;"><a href=""><img style="width: 48px;height: 48px;"
                src="../assets/shu.png" alt=""></a></div>
        </div>
        </button>
        <button style="width:370px;height:100px;border:none ;" @click="haozhao">
        <div class="box1">
          <div>
            <div style="font-size: 20px;color: #666;">
              防疫号召
            </div>
            <div style="font-size: 16px;color: #999;margin-top: 5px;">
              这里是防疫号召
            </div>
          </div>
          <div style="position: absolute;right: 4px;"><a href=""><img style="width: 48px;height: 48px;"
                src="../assets/guan.png" alt=""></a></div>
        </div>
        </button>
        <button style="width:370px;height:100px;border:none ;">
        <div class="box1" style="background-color: #f3f3f5;">
          <div>
            <div style="font-size: 20px;color: #666;">
              投票专区
            </div>
            <div style="font-size: 16px;color: #999;margin-top: 5px;">
              这里是智慧投票
            </div>
          </div>
          <div style="position: absolute;right: 4px;"><a href=""><img style="width: 48px;height: 48px;"
                src="../assets/tp.png" alt=""></a></div>
        </div>
        </button>
      </div>
    </div>
    <div style="font-size: 23px;color: #666;margin-top: 20px;">
      优秀志愿者
    </div>
    <div style="display: flex;align-items: center;width: 100%;justify-content: space-between;">
      <div>
        <div><img style="width:80px;height: 80px;border-radius: 50%;"
            src="https://img1.baidu.com/it/u=2029513305,2137933177&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=472" alt="">
        </div>
        <div style="text-align: center;font-size: 14px;">张三</div>
      </div>
      <div>
        <div><img style="width:80px;height: 80px;border-radius: 50%;"
            src="https://img1.baidu.com/it/u=1659441821,1293635445&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500" alt="">
        </div>
        <div style="text-align: center;font-size: 14px;">熊熊</div>
      </div>
      <div>
        <div><img style="width:80px;height: 80px;border-radius: 50%;"
            src="https://img2.baidu.com/it/u=2738038866,2611619178&fm=253&fmt=auto&app=138&f=JPEG?w=499&h=482" alt="">
        </div>
        <div style="text-align: center;font-size: 14px;">松鼠</div>
      </div>
      <div>
        <div><img style="width:80px;height: 80px;border-radius: 50%;"
            src="https://img1.baidu.com/it/u=1738531146,3909274171&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500" alt="">
        </div>
        <div style="text-align: center;font-size: 14px;">皮卡丘</div>
      </div>
    </div>


    <div style="margin-top: 30px;display: flex;align-items: center;justify-content: space-between;">
      <div style="display: flex;align-items: center;">
        <div :class="[num==1?'btn':'btn1']" @click="handelclick(1)">通知通告</div>
        <div :class="[num==2?'btn':'btn1']" @click="handelclick(2)" style="margin-left: 30px;">今日特点</div>
      </div>
      <div style="font-size: 14px;background-color: #f1f1f1;padding: 2px 10px;border-radius: 8px;">
        更多>
      </div>
    </div>

    <div style="margin-top: 20px;">
       <router-link v-for="item in newlist" :key="item.id" :to="item.content">
       <van-list v-model="loading">
        <div style="color: #333;">{{item.title}}</div>
        <div style="display: flex;align-items: center;">
          <div style="display: flex;align-items: center;">
            <div>
              <img :src="item.img" style="width: 18px;height: 18px;" alt="">
            </div>
            <div style="color: #8a8a8a;font-size: 14px;margin-bottom: 5px;margin-left: 4px;">浏览量:{{item.type}} </div>
          </div>
          <div style="display: flex;align-items: center;margin-left: 20px;">
            <div>
              <img src="../assets/fei.png" style="width: 18px;height: 18px;" alt="">
            </div>
            <div style="color: #8a8a8a;font-size: 14px;margin-bottom: 5px;margin-left: 4px;">发布事件:{{item.time}}</div>
          </div>
        </div>
        </van-list>
      </router-link>
      </div>
 <my-bottom :active="1"></my-bottom>
  </div>


</template>

<script>
import MyBottom from '../components/MyBottom.vue'
import axios from "axios";
  export default {
    components:{MyBottom},
    data() {
      return {
        num: 1,
        newlist: [],
      }
    },
      created() {
      axios
        .get("/api/allnews.php")
        .then((response) => {
          this.newlist = response.data.data;
        })
        .catch(function (error) {
          // handle error
          console.log(error);
        });
       },
    methods: {
        onLoad() {
      // 异步更新数据
      // setTimeout 仅做示例，真实场景中一般为 ajax 请求
      setTimeout(() => {
        for (let i = 0; i < 0; i++) {
          this.list.push(this.list.length + 1);
        }
        // 加载状态结束
        this.loading = false;
        // 数据全部加载完成
        if (this.list.length >= 0) {
          this.finished = true;
        }
      }, 1000);
    },
      handelclick(num) {
        this.num = num
      },
          zhuanqu() {
      this.$router.push("/zhiyuan");
    },
    yungo(){
this.$router.push("/vv");
    },
    haozhao(){
      this.$router.push("/haozhao");
    },
     hesuan(){
      this.$router.push("/hesuan");
    }
    },
    
    }

</script>

<style scoped>
  img {
    width: 100%;
    border-radius: 5%;
    /*将div盒子设置成圆形*/
    height: 170px;
    /*将div盒子设置成正方形*/
    border: rgb(241, 235, 235) dashed 1px;
    /*给div盒子，设置边框*/
    /* padding: 5px;设置div盒子的内填充属性,图片与边框之间会有空白 */
    margin: 5px auto;
  }

  .box-card {
    display: flex;
    width: 100%;
  }

  .box-card-top {
    width: 100%;
    height: 170px;
    background: #f0f9f8;
    border-radius: 8px;
    padding: 20px 0 0 10px;
    box-sizing: border-box;
  }

  .b-c-t {
    width: 50%;
  }

  .b-l-b {
    width: 100%;
    height: 70px;
    background-color: #f5f7f2;
    border-radius: 8px;
    margin-top: 10px;
    padding: 10px;
    box-sizing: border-box;
    display: flex;
  }

  .box1 {
    width: 100%;
    height: 77px;
    background-color: #f5f7f2;
    border-radius: 8px;
    margin-top: 10px;
    display: flex;
    padding: 10px;
    box-sizing: border-box;
    position: relative;
  }
  .btn {
    font-size: 24px;
    color: #333;
    position: relative;
  }

  .btn::after {
    content: '';
    width: 50px;
    height: 4px;
    position: absolute;
    background: #7fa9da;
    border-radius: 8px;
    left: 15px;
    top: 35px;

  }

  .btn1 {
    font-size: 18px;
    color: #666;
  }
</style>